<template>
	<yb-list
	custom-class="yb-flex-1"
	ref="list"
	type="page"
	:bounce="bounce"
	:empty="emptySync"
	:loading="loadingSync"
	:pulldown="pulldownSync"
	:loadmore="loadmoreSync"
	:enableScrolling="enableScrolling"
	@scroll="onScroll"
	@pulldown="onPulldown"
	@loadmore="onLoadmore">
		<slot></slot>
		<yb-list-item v-for="(item, index) in listSync" :key="item.detailUrl + '_' + index">
			<view class="item yb-flex padding-gap" @longpress="onShowItemMore(item)" @tap="onItemClick(item)"  :style="{
				'border-bottom-color': skinColor.color_gap_1
			}">
				<template v-if="item.type == 'character'">
					<view class="cell_2 yb-flex yb-row yb-align-center">
						<yb-avatar lazyLoad :size="100" :src="item.avatar || app.$business.getDefaultAvatar(item.source)"></yb-avatar>
						<view class="yb-flex yb-flex-1 center">
							<yb-text class="name" :size="24" :lines="1" :color="skinColor.color_1" :value="item.title || '佚名'" />
							<yb-text
							class="size"
							:size="22"
							:lines="1"
							:color="skinColor.color_3"
							:value="item.desc || '这个人很懒，什么都没有留下'" /></text>
						</view>
						<template v-if="app.$business.isFollowee(item.id)">
							<yb-button :options="{
								size: 22,
								bgColor: skinColor.color_gap_1
							}" stop @click="app.$business.toFollowee(item)" custom-style="width:130rpx;height:40rpx;" type="warning" value="取消关注"></yb-button>
						</template>
						<template v-else>
							<yb-button :options="{
								size: 22
							}" stop @click="app.$business.toFollowee(item)" custom-style="width:130rpx;height:40rpx;" type="warning" value="关注"></yb-button>
						</template>
					</view>
				</template>
				<template v-else>
					<view class="cell_1 yb-flex yb-row">
						<view class="yb-flex" style="position: relative;margin-right: 30rpx" v-if="item.cover">
							<rd-image style="width: 160rpx;" lazyLoad class="cover yb-flex-1" :src="item.cover" mode="aspectFill"></rd-image>
							<yb-text class="badge" :size="18" :color="skinColor.color_white" :style="{
								'border-top-right-radius': 0,
								'background-color': skinColor.color_red
							}" :value="app.$business.getType(item.type)"></yb-text>
							<text elevation="3" v-if="item.type == 'novel' || item.type == 'comic' || item.type == 'audible'" class="badeg" :style="{
								top: '15rpx',
								'background-color': item.isEnd ? skinColor.color_blue : skinColor.color_green,
								color: skinColor.color_white
							}">{{item.isEnd ? '已完结' : '连载中'}}</text>
							<text elevation="3" class="badeg" v-if="item.isVip" :style="{
								top: (item.type == 'novel' || item.type == 'comic' || item.type == 'audible') ? '40rpx' : '15rpx',
								'background-color': skinColor.color_yellow,
								color: skinColor.color_white
							}">付费</text>
						</view>
						<view class="yb-flex yb-flex-1">
							<yb-text :lines="1" size="30" :lineHeight="30" custom-style="height: 30rpx" weight="bold" :color="skinColor.color_1" :value="item.title || '未知标题'"></yb-text>
							<view class="yb-flex yb-row yb-align-center" style="margin-top: 10rpx;">
								<rd-icon class="icon" name="person" size="25" :color="skinColor.color_2"></rd-icon>
								<yb-text custom-class="name" :size="24" :lines="1" :color="skinColor.color_1" :value="item.creator || '佚名'" />
							</view>
							<yb-text :size="26" :lineHeight="35" :lines="3" :color="skinColor.color_2" custom-style="height: 105rpx;margin-top: 10rpx" :value="getDesc(item)"></yb-text>
							<view class="yb-flex yb-row" v-if="item.tag">
								<yb-text size="22" custom-style="margin-right:10rpx;margin-bottom:10rpx" :color="skinColor.color_blue" v-for="(tag, i) in item.tag.split(',')" :value="'#'+tag" :key="i"></yb-text>
							</view>
							<yb-text v-if="item.latest" :size="22" :lineHeight="26" :lines="1" :color="skinColor.color_orange" custom-style="height: 26rpx;margin-top: 5rpx" :value="'更新至：' + item.latest"></yb-text>
							<view class="yb-flex yb-row " style="margin-top: 10rpx;">
								<yb-tag custom-class="tag" v-if="item.style" :options="{
									bgColor: skinColor.color_2,
									color: skinColor.color_white,
									size: 20
								}" :value="item.style"></yb-tag>
								<yb-tag :options="{
									size: 20
								}" custom-class="tag" type="danger" :value="app.$business.filterSource(item.source).title"></yb-tag>
								<yb-tag v-if="item.updateTime" :options="{
									size: 20
								}" custom-class="tag" type="warning" :value="item.updateTime"></yb-tag>
								<template v-if="!item.cover">
									<yb-tag v-if="item.type == 'novel' || item.type == 'comic' || item.type == 'audible' || item.type == 'video'" :options="{
										size: 20
									}" custom-class="tag" :type="item.isEnd ? 'primary' : 'success'" :value="item.isEnd ? '已完结' : '连载中'"></yb-tag>
									<yb-tag v-if="item.isVip" :options="{
										size: 20,
										bgColor: skinColor.color_yellow,
										color: skinColor.color_white
									}" custom-class="tag" value="付费"></yb-tag>
								</template>
							</view>
						</view>
					</view>
				</template>
			</view>
			<slot name="bottom"></slot>
		</yb-list-item>
	</yb-list>
</template>

<script>
	import appMixin from '@/common/mixin/app.js';
	export default {
		mixins: [appMixin],
		props: {
			list: {
				type: Array,
				default () {
					return new Array
				}
			},
			index: {
				type: [Number, String],
				default: -1
			},
			enableScrolling: {
				type: Boolean,
				default: false
			},
			bounce: {
				type: Boolean,
				default: true
			},
			loading: {
				type: [Boolean,Object,String],
				default: false
			},
			empty: {
				type: [Boolean,Object,String],
				default: false
			},
			pulldown: {
				type: [Boolean,Object],
				default: false
			},
			loadmore: {
				type: [Boolean,Object],
				default: false
			},
			//开启自定义点击事件
			customclickenable: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			emptySync () {
				return Object.assign({}, {
					show: false,
					text: '暂无数据',
					color: this.skinColor.color_gap_1,
					bgColor: this.skinColor.color_bg_1
				}, this.app.$utils.typeof(this.empty) == 'String' ? {text: this.empty} : this.app.$utils.typeof(this.empty) == 'Boolean' ? {show: this.empty} : this.empty)
			},
			loadingSync () {
				return Object.assign({}, {
					show: false,
					text: '加载中',
					color: this.skinColor.color_1,
					bgColor: this.skinColor.color_bg_1
				}, this.app.$utils.typeof(this.loading) == 'String' ? {text: this.loading} : this.app.$utils.typeof(this.loading) == 'Boolean' ? {show: this.loading} : this.loading)
			},
			pulldownSync () {
				return Object.assign({}, {
					show: false,
					color: this.skinColor.color_1
				}, this.app.$utils.typeof(this.pulldown) == 'Boolean' ? {show: this.pulldown} : this.pulldown)
			},
			loadmoreSync () {
				return Object.assign({}, {
					show: !this.isLastPage,
					color: this.skinColor.color_1
				}, this.app.$utils.typeof(this.loadmore) == 'Boolean' ? {show: this.loadmore} : this.loadmore)
			},
			listSync () {
				return this.list.slice(0, Math.min(this.page * this.size, this.list.length))
			},
			isLastPage () {
				return this.page * this.size >= this.list.length
			}
		},
		data () {
			return {
				page: 1,
				size: 20,
				isLoadmoreEnd: false
			}
		},
		methods: {
			onPulldown (callback) {
				this.page = 1
				this.isLoadmoreEnd = false
				if ( this.index > -1 ) {
					this.$emit('pulldown', this.index, callback)
				} else {
					this.$emit('pulldown', callback)
				}
			},
			onLoadmore (callback) {
				if ( this.isLastPage ) {
					if ( this.page * this.size == this.listSync.length ) {
						this.page++
					} 
					if ( this.index > -1 ) {
						this.$emit('loadmore', this.index, callback)
					} else {
						this.$emit('loadmore', callback)
					}
				} else {
					this.page++
					callback('success')
				}
			},
			onItemClick (params) {
				if ( this.customclickenable ) {
					//自定义点击事件
					this.$emit('itemClick', params)
				} else {
					this.app.$business.openDetail(params)
				}
			},
			onScroll (e) {
				this.$emit('scroll', e)
			},
			onShowItemMore (params) {
				this.$emit('itemLongpress', params)
			},
			resetLoadmore () {
				this.isLoadmoreEnd = false
				this.$refs.list.resetLoadmore()
			},
			resetPulldown () {
				this.$refs.list.resetPulldown()
			},
			backTop () {
				this.$refs.list.backTop()
			},
			setLoadmoreEnd () {
				this.isLoadmoreEnd = true
				if ( this.isLastPage ) this.$refs.list.setLoadmoreEnd()
			},
			setLoadmoreSuccess() {
				this.isLoadmoreEnd = false
				if ( this.isLastPage ) this.$refs.list.setLoadmoreSuccess()
			},
			setLoadmoreFail() {
				this.isLoadmoreEnd = false
				if ( this.isLastPage ) this.$refs.list.setLoadmoreFail()
			},
			getDesc (params) {
				if ( params.desc ) return params.desc.trim()
				else return '这是一部来自《' + this.app.$business.filterSource(params.source).title + '》的' + this.app.$business.getType(params.type)
			}
		},
		watch: {
			isLastPage (newVal) {
				if ( !newVal ) {
					this.$refs.list && this.$refs.list.setLoadmoreSuccess()
				} else {
					if ( this.isLoadmoreEnd ) {
						this.$refs.list && this.$refs.list.setLoadmoreEnd()
					}
				}
			},
			list (newVal) {
				if ( newVal.length < this.page * this.size ) {
					this.page = Math.ceil(newVal.length / 20) > 0 ? Math.ceil(newVal.length / 20) : 1
				}
			}
		}
	}
</script>

<style scoped>
	.badge {
		position: absolute;
		right: 0;
		top: 0;
		padding: 5rpx 15rpx 5rpx 10rpx;
		border-bottom-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		font-size: 18rpx;
	}
	.badeg {
		font-size: 18rpx;
		position: absolute;
		left: 0;
		padding: 5rpx 15rpx 5rpx 10rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}
	.item {
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}
	.cell_1 {
		padding: 20rpx 0;
	}
	.cell_1 .name {
		margin-left: 10rpx;
	}
	.cell_1 .tag {
		margin-right: 10rpx;
	}
	
	.cell_2 {
		height: 150rpx;
	}
	.cell_2 .center {
		margin: 0 20rpx;
	}
	.cell_2 .center .name {
		font-size: 26rpx;
	}
	.cell_2 .center .size {
		margin-top: 15rpx;
	}
	
	.cell_4 {
		padding: 20rpx 0;
	}
	.cell_4 .cover-box {
		position: relative;
		border-radius: 12rpx;
		width: 200rpx;
		height: 150rpx;
		margin-right: 20rpx;
	}
	.cell_4 .image {
		position: relative;
	}
</style>
